<template>
    <div class="comment">
        <span class="username">
            {{comment.username}}
        <span class="mao">:</span>
        </span>
        <span class="content">{{comment.content}}</span>
        <div class="delete" @click="deleteFunction(index)">
            <img src="https://alidocs.oss-cn-zhangjiakou.aliyuncs.com/res/NybEnBB3E2wMnP13/img/1cf741d2-1336-4f73-a721-dabc50ffee1e.png?x-oss-process=image/resize,w_1280,m_lfit,limit_1" alt="">
        </div>
    </div>
</template>

<script lang="ts" name="Comment" setup>
import { defineProps } from 'vue'
defineProps(['comment','index','deleteFunction'])
</script>

<style scoped>
.comment{
    padding: 20px;
    border-bottom: 1px solid #ddd;
    position: relative;
}
.username{
    color: brown;
    margin-right: 20px;
}
.mao{
    color: black;
}
.delete{
    display: none;
    position: absolute;
    top: 50%;
    margin-top: -10px;
    right: 20px;
    cursor: pointer;
}
.delete img{
    width: 20px;
    height: 20px;
}
.comment:hover .delete{
    display: block;
}
</style>